<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1100px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="170px" label-suffix=":" class="prod-form-class" v-loading="loading" :disabled="disabled">
            <el-form-item label="产品名称" prop="product_name">
                <el-input v-model.trim="model.product_name" placeholder="请输入产品名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="产品类型" prop="product_attr_type">
                <el-select v-model="model.product_attr_type" placeholder="请选择产品类型" clearable>
                    <el-option v-for="(dict, index) in dict.appendLevelList" :key="index" :label="dict.label" :value="dict.label"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产品尺码" prop="size_variant">
                <el-input v-model.trim="model.size_variant" placeholder="请输入商品尺码" clearable></el-input>
            </el-form-item>
            <el-form-item label="产品颜色" prop="color_variant">
                <el-input v-model.trim="model.color_variant" placeholder="请输入商品颜色" clearable></el-input>
            </el-form-item>
            <el-form-item label="产品成本" prop="purchase_cost">
                <el-input-number v-model.trim="model.purchase_cost" :controls="false" :min="0" placeholder="请输入产品成本" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="产品售价" prop="sale_cost">
                <el-input-number v-model.trim="model.sale_cost" :controls="false" :min="0" placeholder="请输入产品售价" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="产品毛利" prop="gross_profit">
                <el-input-number v-model.trim="model.gross_profit" :controls="false" :min="0" placeholder="请输入产品毛利" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="产品毛利率" prop="gross_profit_rate">
                <el-input-number v-model.trim="model.gross_profit_rate" :controls="false" :min="0" placeholder="请输入产品毛利率" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="是否新品" prop="is_new">
                <el-radio-group v-model="model.is_new">
                    <el-radio v-for="(dict, index) in dict.isNew" :key="index" :label="dict.value">{{ dict.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否有现货" prop="is_current">
                <el-radio-group v-model="model.is_current">
                    <el-radio v-for="(dict, index) in dict.isCurrent" :key="index" :label="dict.value">{{ dict.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="产品毛量" prop="base_weight">
                <el-input v-model.trim="model.base_weight" placeholder="请输入产品毛量" clearable></el-input>
            </el-form-item>
            <el-form-item label="运营者" prop="develper">
                <el-input v-model.trim="model.develper" placeholder="请输入运营者" clearable></el-input>
            </el-form-item>
            <el-form-item label="供应商名称" prop="supply_name">
                <el-input v-model.trim="model.supply_name" placeholder="请输入供应商名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="供应商链接" prop="supply_link">
                <el-input v-model.trim="model.supply_link" placeholder="请输入供应商链接" clearable></el-input>
            </el-form-item>
            <!-- <el-form-item label="备注" prop="remarks" class="full">
                <el-input type="textarea" v-model.trim="model.remarks" placeholder="请输入备注" :autosize="{ minRows: 3, maxRows: 6 }" clearable></el-input>
            </el-form-item> -->

            <el-form-item label="图片" prop="product_images">
                <ImageUploadMultiple v-model="model.product_images" :limit="1" :multiple="false"></ImageUploadMultiple>
            </el-form-item>
            <el-form-item label="售卖页对应尺码" prop="product_size_images">
                <ImageUploadMultiple v-model="model.product_size_images" :limit="1" :multiple="false"></ImageUploadMultiple>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="!disabled">
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { queryProductNewDetail, productNewAdd, productNewEdit, getAppendLevel } from '@/api/product'
import { getSupplyList } from '@/api/supply'
import { AUDIT_STATUS, IS_NEW_TYPE, IS_CURRENT_TYPE } from '../constant'
export default {
    name: 'ProductNewDetailDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
        type: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            loading: false,
            save: false,
            model: {
                idK: undefined,
                product_attr_type: undefined,
                product_name: undefined,
                size_variant: undefined,
                color_variant: undefined,
                product_size_images: undefined,
                product_images: undefined,
                purchase_cost: undefined,
                sale_cost: undefined,
                gross_profit: undefined,
                gross_profit_rate: undefined,
                is_current: 1,
                is_new: 1,
                base_weight: undefined,
                supply_name: undefined,
                supply_link: undefined,
                develper: undefined,
            },
            rules: {},
            supplyList: [],
            dict: {
                auditStatus: AUDIT_STATUS,
                isNew: IS_NEW_TYPE,
                isCurrent: IS_CURRENT_TYPE,
            },
            shareScope: -1,
        }
    },
    computed: {
        disabled() {
            return this.type === 'view'
        },
        title() {
            return `${this.type == 'edit' ? '编辑' : this.type == 'add' ? '新增' : '查看'}产品上新`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    async mounted() {
        this.loading = true
        try {
            const [appendLevelData, supplyData] = await Promise.all([getAppendLevel(), getSupplyList()])

            this.dict.appendLevelList = appendLevelData?.data ?? []
            this.dict.supplyList = supplyData?.data ?? []
            // this.filterSupply()
            if (this.type === 'edit' || this.type === 'view') {
                this.getDetail()
            }
        } catch (error) {
            console.log(error)
        }
        this.loading = false
    },
    methods: {
        // filterSupply(value) {
        //     if (!value) {
        //         this.supplyList = this.dict.supplyList
        //     } else {
        //         const lowerCaseValue = value.toLowerCase()
        //         this.supplyList = this.dict.supplyList.filter(item => item.supply_name.indexOf(value) != -1 || item.spu.toLowerCase().indexOf(lowerCaseValue) != -1)
        //     }
        // },

        getDetail() {
            this.loading = true
            const params = { id: this.params.id }
            queryProductNewDetail(params)
                .then(res => {
                    this.model = Object.assign({}, this.model, res.data)
                    this.model.size_type = Number(this.model.size_type)
                })
                .finally(() => {
                    this.loading = false
                })
        },

        submit() {
            const params = {
                ...this.model,
                product_images:  Array.isArray(this.model.product_images) ? this.model.product_images.join() : this.model.product_images ?? '',
                product_size_images:  Array.isArray(this.model.product_size_images) ? this.model.product_size_images.join() : this.model.product_size_images ?? '',
            }
            if (this.save) {
                return
            }
            this.save = true
            if (this.type === 'edit') {
                params.id = this.params.id
                productNewEdit(params)
                    .then(res => {
                        this.$message.success(res.msg)
                        this.dialogVisible = false
                        this.$emit('success')
                    })
                    .finally(() => {
                        this.save = false
                    })
            } else {
                productNewAdd(params)
                    .then(res => {
                        this.$message.success(res.msg)
                        this.dialogVisible = false
                        this.$emit('success')
                    })
                    .finally(() => {
                        this.save = false
                    })
            }
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.prod-form-class.el-form .el-form-item {
    width: 50%;
    margin-right: 0;
}
.prod-form-class.el-form .el-form-item .el-input {
    width: 250px;
}
.prod-form-class.el-form .el-form-item.w750 {
    width: 100%;
}
.prod-form-class.el-form .el-form-item.w750 .el-input {
    width: 770px;
}
.prod-form-class.el-form .el-form-item .el-textarea {
    width: 770px;
}
.prod-form-class.el-form .el-form-item.full {
    width: 100%;
}
.prod-form-class.el-form .el-form-item.full .el-input,
.prod-form-class.el-form .el-form-item.full .el-cascader {
    width: 770px;
}
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120 + .el-input-number {
    margin-left: 10px;
}
.prod-form-class.el-form .el-form-item .el-input-number,
.prod-form-class.el-form .el-form-item .el-input-number .el-input {
    width: 250px;
}
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120,
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120 .el-input {
    width: 120px;
}
.prod-form-class.el-form .el-input-number.is-without-controls .el-input__inner {
    text-align: left;
}
.custom-select .el-select-dropdown__item {
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
